<template>
    <!-- 标题 -->
    <van-nav-bar
        title="用户登录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />


    <div class="v-photo">
                <!-- <van-image src="https://img.zcool.cn/community/01f8b6593a0054a8012193a31c86c5.jpg@2o.jpg" /> -->
                <div class="v-text">
                <h6 class="v-h6">好吃好喝</h6>
                <p class="v-p">为了更加美好的明天而奋斗</p>
            </div>
            </div>
    <!-- 账户登录 -->
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
                v-model="username"
                name="账号"
                label="账号"
                placeholder="账号"
                :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { RequestLogin } from '@/api/index'
import axios from "axios"
import { useAccountStore } from '@/stores/user'
import type { IAccount } from '@/types/types'
import {useRouter} from 'vue-router'
import {Toast} from 'vant'


// 返回上一级
const onClickLeft = () => history.back()

// 登录
const username: Ref<string> = ref('')
const password: Ref<string> = ref('')
const accountStore = useAccountStore()
const router = useRouter()
const onSubmit = async () => {

    let res = await axios({
        method:"post",
        url:'http://localhost:3000/users/login',
        data:{
            userName:username.value,
            userPwd:password.value,
        }
    })
    const {code,info,token} = res.data
    if (code === 1) {
        //保存用户信息，主界面登录按钮换成头像
        const actions = {
            nick: info.nick,
            url: info.img_url,
            username:username.value
        }
        accountStore.saveAccount(actions)
        //保存token
        localStorage.setItem('TOKEN', token as any)
        // accountStore.token = token
        // console.log(accountStore.token);
        
      
        
        //登录成功，页面跳转
        Toast.success('登录成功！')
        router.replace('/')
    }else{
        Toast.fail('账号或密码错误')
    }
}
</script>

<style lang="scss" scoped>
        .v-text {
            width: 100%;
            height: 20%;
            margin-top: -40px;

            .v-h6 {
                font-size: 28px;
                text-align: center;
                font-weight: 500;

            }

            .v-p {
                line-height: 20px;
                text-align: center;
                font-size: 20px;
                margin-top: -20px;
                color: rgb(200, 188, 159);

            }
        }
</style>
